/* eslint-disable no-debugger */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable @typescript-eslint/no-unused-vars */
import CustomBlockquote from "@/components/Blockquote";
import DictTag from "@/components/DictTag";
// import { dict } from "@/services/api/monitor/dict";
// import dept from "@/services/api/organize/dept";
import { getAllKeys } from "@/utils";
import { PlusOutlined } from "@ant-design/icons";
import { ActionType, PageContainer, ProColumns, ProTable } from "@ant-design/pro-components";
import type { FormInstance } from "antd";
import { Button, Divider, Input, Popconfirm, Space, Typography, message } from "antd";
import React, { useEffect, useRef, useState } from "react";
import DeptForm, { DeptFormData } from "./components/deptForm";
import { getDict } from "@/services/api/module/system/dict";
import { getList, remove, save, update } from "@/services/api/module/system/dept";
import FilterDrawer from "@/components/FilterDrawer";
import CustomerTable from "@/components/CustomerTable";
import { createTableColumns, proTableCardProps } from "./constants";
import { dict } from "@/utils/DictionaryCacheManager";
const DeptTableList: React.FC = () => {
	const formTableRef = useRef<FormInstance>();
	const [modalVisible, setModalVisible] = useState<boolean>(false);
	const actionRef = useRef<ActionType>();
	const [currentRow, setCurrentRow] = useState<API.Setting.DeptVo>();
	const [currentRowId, setCurrentRowId] = useState<number | undefined>(undefined);
	const [selectedRows, setSelectedRows] = useState<API.Setting.DeptVo[]>([]);
	const [deptTree, setDeptTree] = useState<any>([]);
	const [statusOptions, setStatusOptions] = useState<any>([]);
	const [deptTypeOptions, setDeptTypeOptions] = useState<any>([]);
	const [expandedRowKeys, setExpandedRowKeys] = useState<any>([100]);
	const [data, setData] = useState<API.Setting.DeptVo[]>();
	const [searchFormValue, setSearchFormValue] = useState<any>(undefined);
	const [searchValue, setSearchValue] = useState<any>(undefined);

	useEffect(() => {
		dict.getDict("sys_base_status", true).then(data => {
			setStatusOptions(data);
		});
		dict.getDict("dept_type", true).then(data => {
			setDeptTypeOptions(data);
		});
	}, []);

	// 展开全部
	const handleExpandAll = () => {
		setExpandedRowKeys(getAllKeys(data));
	};
	// 收起全部
	const handleCollapseAll = () => {
		setExpandedRowKeys([]);
	};
	// 关闭表单刷新列表
	const handleTableForm = async () => {
		setModalVisible(false);
		setCurrentRowId(undefined);
		if (actionRef.current) {
			actionRef.current.reload();
		}
	};
	// 保存
	const handleSave = async (values: DeptFormData): Promise<boolean> => {
		return new Promise((resolve, reject) => {
			save({ ...values } as DeptFormData)
				.then((res: any) => {
					message.success(res.msg);
					handleTableForm();
					resolve(true);
				})
				.catch(() => {
					reject(false);
				});
		});
	};
	// 编辑
	const handleUpdate = async (values: DeptFormData): Promise<boolean> => {
		return new Promise((resolve, reject) => {
			update({ ...values } as DeptFormData)
				.then((res: any) => {
					message.success(res.msg);
					handleTableForm();
					resolve(true);
				})
				.catch(() => {
					reject(false);
				});
		});
	};
	// 删除
	const handleRemove = async (id: number): Promise<boolean> => {
		return new Promise((reslove, reject) => {
			remove(id)
				.then((res: any) => {
					message.success(res.msg);
					if (actionRef.current) {
						actionRef.current.reload();
					}
					reslove(true);
				})
				.catch(() => {
					reject(true);
				});
		});
	};
	//列操作回调函数
	const handleColumnEditor = (record: API.Setting.DeptVo) => {
		setCurrentRowId(record.id);
		setModalVisible(true);
	};
	//列操作回调函数
	const handleColumnRemove = (record: API.Setting.DeptVo) => {
		handleRemove(record?.id);
	};
	const columns: ProColumns<API.Setting.DeptVo>[] = createTableColumns(statusOptions, handleColumnEditor, handleColumnRemove);
	const handleCancelForm = () => {
		setModalVisible(false);
		setCurrentRowId(undefined);
	};
	//表格头部
	const toolBarRender = () => [
		<Button
			type="primary"
			key="add"
			onClick={async () => {
				setModalVisible(true);
			}}
		>
			<PlusOutlined /> 创建部门
		</Button>,
		<Button key="primary" onClick={() => handleExpandAll()}>
			展开全部
		</Button>,
		<Button key="primary" onClick={() => handleCollapseAll()}>
			收起全部
		</Button>
	];
	//数据请求
	const tableDataRequest = async (params: {} | undefined) => {
		return await getList({ ...searchFormValue, ...searchValue }).then((res: any) => {
			setData(res.data);
			return {
				data: res.data,
				total: res.data?.length,
				success: res.isSuccess
			};
		});
	};
	//输入框搜索
	const handleOnSearch = async (value: any) => {
		setSearchValue({
			deptName: value
		});
		actionRef.current?.reload();
	};
	return (
		<>
			<CustomerTable<API.Setting.DeptVo>
				ghost
				toolbar={{
					search: (
						<Space>
							<Input.Search placeholder="通过用户账号搜索" allowClear style={{ width: 280 }} onSearch={handleOnSearch} />
							<FilterDrawer
								columns={columns}
								tableActionRef={actionRef}
								onReset={() => {
									setSearchFormValue(undefined);
									actionRef?.current?.reload();
								}}
								onSubmit={(values: any) => {
									setSearchFormValue(values);
									actionRef?.current?.reload();
								}}
							/>
						</Space>
					)
				}}
				cardProps={proTableCardProps}
				scroll={{ y: undefined }}
				tableStyle={{ minHeight: "calc(100vh - 205px)" }}
				pagination={false}
				actionRef={actionRef}
				formRef={formTableRef}
				rowKey="id"
				key="deptList"
				search={false}
				tableAlertRender={false}
				expandable={{
					expandedRowKeys,
					defaultExpandAllRows: true,
					onExpandedRowsChange: newExpandedRowKeys => {
						setExpandedRowKeys(newExpandedRowKeys);
					}
				}}
				toolBarRender={toolBarRender}
				request={tableDataRequest}
				columns={columns}
				rowSelection={{
					onChange: (_, selectedRows) => {
						setSelectedRows(selectedRows);
					}
				}}
			/>
			<DeptForm
				onSubmit={async (values: DeptFormData) => {
					return values.id ? await handleUpdate(values) : await handleSave(values);
				}}
				onCancel={handleCancelForm}
				open={modalVisible}
				id={currentRowId}
				statusOptions={statusOptions}
			/>
		</>
	);
};

export default DeptTableList;
